<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue3</title>
</head>
<body>
  <div id="app"></div>
  <script src="/dist/vue.js"></script>
  <script>
    let { createApp, reactive, effect, h, ref, onBeforeMount, onMounted, computed } = Vue;

    let state = reactive({name: 'dj', flag: true})
    
    const App = {
      setup() {
        return () => {
          return state.flag ? 
            h('div',{}, [
              h('li',{key: 'A',style: {color: 'red'}}, 'A'),
              h('li',{key: 'B',style: {color: 'blue'}}, 'B'),
              h('li',{key: 'C',style: {color: 'red'}}, 'C'),
              h('li',{key: 'D',style: {color: 'pink'}}, 'D'),
              h('li',{key: 'E',style: {color: 'red'}}, 'E'),
              h('li',{key: 'F',style: {color: 'pink'}}, 'F'),
              h('li',{key: 'G',style: {color: 'red'}}, 'G')
            ]) : 
            h('div',{}, [
              h('li',{key: 'A',style: {color: 'pink'}}, 'A'),
              h('li',{key: 'B',style: {color: 'blue'}}, 'B'),
              h('li',{key: 'F',style: {color: 'blue'}}, 'F'),
              h('li',{key: 'D',style: {color: 'red'}}, 'D'),
              h('li',{key: 'W',style: {color: 'pink'}}, 'W'),
              h('li',{key: 'H',style: {color: 'red'}}, 'H'),
              h('li',{key: 'G',style: {color: 'red'}}, 'G'),
            ])
        }
      }
    }

    let state2 = ref(0);

    let state3 = computed(() => {
      return state2.value + 10
    })
    // console.log(state2)

    effect(()=>{
      app.innerHTML = state3.value
    })
    
    // let App2 = {
    //   setup() {
    //     onBeforeMount(()=>{
    //       console.log('挂载前的钩子做点什么...')
    //     })
    //     onMounted(()=>{
    //       console.log('挂载成功了做点什么...')
    //     })
    //     return () => {
    //       return h('div',{style: {color: 'red'}}, state.name)
    //     }
    //   }
    // }

    // createApp(App2).mount('#app')

    // setTimeout(() => {
    //   (state2.value)++
    // },2000)
  </script>
</body>
</html>